<script setup lang="ts">
import { ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
const navList = ref([
  { title: '首页', url: '/homePage', isActive: true },
  { title: 'BOT', url: '/BOTPage', isActive: false },
  { title: '沸点', url: '', isActive: false },
  { title: '课程', url: '', isActive: false },
  { title: '直播', url: '', isActive: false },
  { title: '活动', url: '', isActive: false },
  { title: '竞赛', url: '', isActive: false },
])
</script>

<template>
  <header>
    <div class="wrapper">
      <div class="header">
        <div class="container">
          <h1 class="logo">
            <a href="#"
              ><img
                src="https://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
                alt="稀土掘金"
            /></a>
          </h1>
          <div class="main-nav">
            <ul class="main-nav-left">
              <!-- <li class="nav-item outline active"><a href="#">首页</a></li>
              <li class="nav-item outline"><a href="#">BOT</a></li>
              <li class="nav-item outline"><a href="#">沸点</a></li>
              <li class="nav-item outline"><a href="#">课程</a></li>
              <li class="nav-item outline"><a href="#">直播</a></li>
              <li class="nav-item outline"><a href="#">活动</a></li>
              <li class="nav-item outline"><a href="#">竞赛</a></li> -->
              <template v-for="item in navList" :key="item.title">
                <li
                  class="nav-item outline"
                  :class="{ active: item.isActive }"
                  @click="!item.isActive"
                >
                  <RouterLink :to="{ path: item.url }">{{ item.title }}</RouterLink>
                </li>
              </template>

              <li class="nav-item"><a href="#">商城</a></li>
              <li class="nav-item"><a href="#">APP</a></li>
              <li class="nav-item"><a href="#">插件</a></li>
              <li class="nav-item">
                <a href="#"
                  ><img
                    src="./img/0913958971aceafc8b2c6fc1519ceb2a.png~tplv-k3u1fbpfcp-jj-mark-v1_0_0_0_0_IA==_q75.png"
                    alt="AGI知识库"
                /></a>
              </li>
            </ul>
            <div class="main-nav-right">
              <div class="search-item">
                <form class="search-form" action="#">
                  <input type="text" placeholder="探索稀土掘金" />
                  <div>
                    <svg
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      class="search-icon"
                    >
                      <path
                        d="M12.4008 12.4008C14.744 10.0577 14.744 6.25871 12.4008 3.91556C10.0577 1.57242 6.25871 1.57242 3.91556 3.91556C1.57242 6.25871 1.57242 10.0577 3.91556 12.4008C6.25871 14.744 10.0577 14.744 12.4008 12.4008ZM12.4008 12.4008L15.5828 15.5828"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      ></path>
                    </svg>
                  </div>
                </form>
                <div class="create-center">
                  <button class="create-center-btn"><a href="">创作者中心</a></button>
                  <div class="create-center-more">
                    <svg
                      width="12"
                      height="12"
                      viewBox="0 0 12 12"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      class="unfold12-icon"
                    >
                      <path
                        d="M2.45025 4.82383C2.17422 4.49908 2.40501 4 2.83122 4H9.16878C9.59499 4 9.82578 4.49908 9.54975 4.82382L6.38097 8.5518C6.1813 8.7867 5.8187 8.7867 5.61903 8.5518L2.45025 4.82383Z"
                        fill="white"
                      ></path>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="vip">
                <div class="vip-entry">
                  <img
                    src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ffd3e238ee7f46eab42bf88af17f5528~tplv-k3u1fbpfcp-image.image#?w=25&amp;h=26&amp;s=5968&amp;e=svg&amp;a=1&amp;b=dacbbc"
                    alt="vip"
                    class="vip-entry-img"
                  />
                </div>
                <div class="vip-words">会员</div>
              </div>
              <div class="login-item">
                <button class="login-item-btn">
                  登录
                  <div class="login-item-btn-inner">
                    <div class="login-item-btn-line"></div>
                    注册
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  <RouterView />
</template>

<style scoped>
/* 导航条部分 */
.header {
  background-color: #fff;
}

.header .container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.logo {
  width: 107px;
  height: 60px;
  margin: 0 12px 0 24px;
}

.logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.logo a img {
  width: 100%;
}

.container .main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  flex-grow: 1;
}

.main-nav-left,
.nav-item {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-item {
  padding: 0 12px;
  cursor: pointer;
  color: #86909c;
}

.nav-item a {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 14px;
  color: #515767;
  text-decoration: none;
}

.nav-item a:hover {
  color: #000;
}

.outline a:hover {
  border-bottom: 1px solid #1e80ff;
}

.nav-item img {
  width: 115px;
}

.active a {
  color: #1e80ff;
}

.active a:hover {
  color: #000;
}

.main-nav-right {
  display: flex;
  align-items: center;
  height: 60px;
}

.search-item {
  display: flex;
  align-items: center;
  height: 100%;
  width: 412px;
}

.search-form {
  display: flex;
  align-items: center;
  width: 260px;
  height: 34px;
  border: 1px solid #c2c8d1;
  border-radius: 4px;
  margin-right: 12px;
}

.search-form:hover {
  border-color: #000;
}

.search-form input {
  flex: 1;
  padding: 7.2px 0 7.2px 12px;
  border: none;
  font-size: 14px;
  color: #515767;
  background-color: #fff;
}

.search-form input:focus {
  outline: none;
}

.search-form div {
  width: 44px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f2f3f5;
  border-radius: 2px;
  position: relative;
  left: -2px;
}

.create-center {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  width: 132px;
}

.create-center .create-center-btn {
  padding: 0 12px;
  height: 36px;
  width: 94px;
  background-color: #1e80ff;
  border-radius: 3px 0 0 3px;
  border: none;
  color: #fff;
  cursor: pointer;
}

.create-center .create-center-btn > a {
  color: #fff;
  text-decoration: none;
}

.create-center .create-center-btn:hover {
  background-color: #1171ee;
}

.create-center .create-center-more {
  display: flex;
  align-items: center;
  background-color: #1e80ff;
  width: 20px;
  height: 36px;
  justify-content: center;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  color: #fff;
  border-left: 1px solid hsla(0, 0%, 100%, 0.1);
}

.create-center .create-center-more:hover {
  background-color: #1171ee;
}

.vip {
  display: flex;
  align-items: center;
  height: 60px;
  width: 56px;
  margin: 0 12px;
  cursor: pointer;
}

.vip-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 100%;
}

.vip-words {
  margin-left: 4px;
  color: #86909c;
}

.login-item {
  display: flex;
  align-items: center;
  height: 60px;
  width: 118.6px;
  margin-left: 10px;
  /* 简化计算 */
}

.login-item-btn {
  height: 36px;
  width: 94.6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24px;
  border: 0.8px solid rgba(30, 128, 255, 0.3);
  border-radius: 4px;
  background: rgba(30, 128, 255, 0.05);
  padding: 3.6px 12px;
  color: #007fff;
}

.login-item-btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22.8px;
  width: 41px;
}

.login-item-btn-line {
  margin: 0 6px;
  background-color: #abcdff;
  height: 12px;
  width: 1px;
}
</style>
